<template>
  <el-select v-model="value" class="m-2" placeholder="">
    <el-option
      v-for="item in selectList"
      @click="handleClickBtn(value)"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script  setup >
import { ref, reactive, onMounted, defineEmits } from "vue";

const props = defineProps({
  selectList: {
    type: Array,
  },
});

// if(props.selectList.length >1){
// const value = ref(props.selectList[0]);
//   console.log(props.selectList);
// }

const value = ref(props.selectList[0].value);

const emits = defineEmits(["handleClickBtn"]);

const handleClickBtn = (val) => {
  emits("handleClickBtn", val);
};

onMounted(() => {
  console.log(props.selectList[0].value);
  console.log(props.selectList);
});
</script>
<style lang="less">
.el-select {
  width: 150px;
  float: right;
}
.el-select {
  background: transparent;
  .el-input__wrapper {
    background: #004064;
    box-shadow: none;
  }
  .el-input__inner {
    color: #d6e3ea;
    text-align: center;
    font-size: 14px;
    --el-input-placeholder-text: 14px;
    --el-input-placeholder-color: #d6e3ea;
  }
  .el-pagination {
    background-color: transparent;
  }
  .el-scrollbar {
    background: #01233c;
  }
  .el-popper {
    /* background: transparent !important; */
    border: 1px solid #185481 !important;
    /* border: none !important; */
  }
  .el-select-dropdown__item.hover {
    background: #028cda !important;
  }
  .el-select-dropdown__item {
    color: #d6e3ea;
  }
}
</style>

